<template>
  <div class="productList">
    <h2>{{ this.$store.state.typeFilter.type }}</h2>
    <div class="sortAndPageChange">
      <Condition class="sort" />
      <PageChange class="pageChange" />
    </div>
    <Item ref="item" :renderData="this.$store.state.showProductList.slice(0, 23)" />
    <PageChange class="pageChange" />
    <Bottom />
  </div>
</template>

<script>
import Item from "@/components/product/item";
import Condition from "./condition/condition";
import PageChange from "./pageChange/pageChange";
import Bottom from "@/components/bottom";
export default {
  name: "productList",
  components: {
    Item,
    Condition,
    PageChange,
    Bottom,
  },
  data() {
    return {
      currentPage: 1,
    };
  },
  created() {
  },
  methods: {
  }, // methods
};
</script>

<style lang="scss" scoped>
.productList {
  position: relative;
  width: 100%;
  font-family: DianHei-5;
  cursor: pointer;
  float: left;
  h2 {
    letter-spacing: 0.2rem;
    margin: 50px 0;
  }
  .sortAndPageChange {
    width: 100%;
    height: 50px;
    .sort {
      float: left;
    }
    .pageChange {
      float: right;
    }
  }
  .pageChange {
    float: right;
    margin-bottom: 50px;
  }
}
</style>>